
import React, { Component } from 'react'
import { connect } from 'react-redux'
import dayjs from "dayjs";

import { INVENTORY_RECORDS_STATUS } from "@constants/StorageStatus";
import { getInventoryList, getInventoryInfo } from '@sagas/warehouse/stockManagement'
import DateRangePicker from "@common/presentational/DateRangePicker";
import { WarehouseSelect } from '@components/warehouse/WarehouseSelect'
import ParamsInput from "@common/presentational/ParamsInput";
import { withRouter } from "react-router-dom";
import CustomizeTableProvide, { CustomizeTable, CustomizeTablePagination } from "@common/presentational/CustomizeTable";
import { getQuery, handleQueryEqual, setQuery } from "@utils/setUrlQuery";
function mapStateToProps(state) {
    const { stockManagement, warehouseManagement } = state
    return {
        inventoryList: stockManagement.inventoryList,
        selectedWarehouse: warehouseManagement.selectedWarehouse
    }
}

@connect(
    mapStateToProps,
    {
        getInventoryList,
        getInventoryInfo
    }
)
@withRouter
class InventoryRecords extends Component {
    constructor(props) {
        super(props)
        const {
            query = '',
            startDate = dayjs().subtract(1, 'month').add(1, 'days').format('YYYY-MM-DD'),
            endDate = dayjs().format('YYYY-MM-DD'),
            warehouseId = props.selectedWarehouse,
        } = getQuery(props.history)
        this.state = {
            tab: props.tab,
            query,
            startDate,
            endDate,
            warehouseId,
        }
        this.paginationInfo = {}
        this.tableRef = React.createRef()
        this.getTableInfo = this.getTableInfo.bind(this)
    }

    goModify(record){
        const { warehouseId } = this.state
        const { history } = this.props
        this.props.getInventoryInfo({
            id: warehouseId,
            orderNumber: record.order_number
        }, (res) => {
            history.push({
                pathname: `/warehouse/check-edit/${record.order_number}`,
                state: {
                    ...res
                }
            })
        })
    }

    goDetail(record){
        const { warehouseId } = this.state
        const { history } = this.props
        this.props.getInventoryInfo({
            id: warehouseId,
            orderNumber: record.order_number
        }, (res) => {
            history.push({
                pathname: `/warehouse/check-detail/${record.order_number}`,
                state: {
                    ...res
                }
            })
        })
    }

    setUrlQuery() {
        const { current, pageSize } = this.paginationInfo
        const { tab, query, startDate, endDate, warehouseId, } = this.state
        const { history } = this.props
        let params = {
            tab,
            query,
            startDate, endDate,
            warehouseId, current, pageSize
        }
        handleQueryEqual(params, history) || setQuery(params, history)
    }

    getTableInfo({ current, pageSize } = this.paginationInfo) {
        this.paginationInfo = { current, pageSize }
        const { query, startDate, endDate } = this.state
        const { warehouseId } = this.state
        this.setUrlQuery()
        const params = {
            id: warehouseId,
            startDate,
            endDate,
            pageNo: current,
            pageSize,
        }
        if (query) {
            params.queryOrderNumber = query
        }
        warehouseId && this.props.getInventoryList(params)
    }

    getTableParams = () => {
        const { inventoryList } = this.props
        const columns = [{
            title: '盘点单号',
            dataIndex: 'order_number',
            key: 'order_number',
        }, {
            title: '创建时间',
            dataIndex: 'create_time',
            key: 'create_time',
        }, {
            title: '盘点项数',
            dataIndex: 'detail_count',
            key: 'detail_count',
        }, {
            title: '盘点状态',
            dataIndex: 'status',
            key: 'status',
            render: (text) => INVENTORY_RECORDS_STATUS[text]
        }, {
            title: '操作',
            key: 'operation',
            width: '15%',
            render: (text, record) =>
                <div className="flex-vertical-center">
                    {record.status === 1 ?
                        <div className="mgr-8 ft-hover" onClick={this.goModify.bind(this,record)}>修改</div>
                        : null}
                    <div className="mgr-8 ft-hover" onClick={this.goDetail.bind(this,record)}>详情</div>
                </div>
        }];
        const tableData = (inventoryList.orders || []).map((warehouse, index) => ({
            ...warehouse,
            key: `warehouse_${index}`,
        }))
        return {
            columns,
            tableData,
            total: inventoryList.total
        }
    }

    initTable() {
        this.tableRef.current?.initPage()
    }

    handleValueChange(key, value) {
        if (key === 'dateRange') {
            this.setState({
                ...value
            }, this.initTable)
            return;
        }
        this.setState({
            [key]: value
        }, this.initTable)
    }

    showMaterialModal({ data } = {}) {
        const ref = this.refs['materialModal']

        if (ref) {
            ref.show({ data })
        }
    }

    render() {
        const { columns, tableData, total } = this.getTableParams()
        const { startDate, endDate, query, warehouseId } = this.state
        return (
            <div>
                <div className="table-params page-params flex-vertical-center mgb-16">
                    <WarehouseSelect
                        className="mgl-16"
                        value={warehouseId}
                        onChange={this.handleValueChange.bind(this, 'warehouseId')}
                    />

                    <DateRangePicker
                        className="mgl-16"
                        startDate={startDate}
                        endDate={endDate}
                        onChange={this.handleValueChange.bind(this, 'dateRange')}
                        beforeNow
                    />
                    <ParamsInput
                        className="mgl-16"
                        style={{ width: '200px' }}
                        value={query}
                        onChange={this.handleValueChange.bind(this, 'query')}
                        placeholder="盘点单号"
                    />
                </div>
                <CustomizeTableProvide ref={this.tableRef} tableKey="warehouseList" onChange={this.getTableInfo}>
                    <div className="table-list">
                        <CustomizeTable
                            columns={columns}
                            dataSource={tableData || []}
                            pagination
                        />
                    </div>
                    <div className="table-pagination">
                        <CustomizeTablePagination
                            total={total}
                        />
                    </div>
                </CustomizeTableProvide>

            </div>
        )
    }
}

export default InventoryRecords